/*aaaaaaa*/

.submitpage {background: #fff;}
ul li{list-style: none;}
input{outline: none;}
.submitpage .page, .submitpage .page-group{background: #fff;}
.head-bg{width: 100%;height: 200px;background:#FFDE31;position: relative;overflow: hidden; }
.head-bg .img{width: 80%;height: 282px;background:url("../img/flicker-bg.svg") no-repeat center center; background-size: 100% auto; animation:play  3s infinite linear ;position: absolute;left: 10%;top: 0;z-index: 9;}
.head-bg .img-head{position: absolute;z-index: 99;bottom:-4px;left: 50%;display: table;margin-left: -100px;width: 200px;}
.head-bg .img-head img{display: block;margin: 0 auto;width: 100%;}
.head-bg .boy-ico::before{content: "";width: 60%;height: 100%;background: url("../img/boy-ico.svg") no-repeat 18%;display: inline-block;position: absolute;left:10%;background-size: 100% auto;}
.head-bg .girl-ico::before{content: "";width: 60%;height: 100%;background: url("../img/girl-ico.svg") no-repeat 18%;display: inline-block;position: absolute;left:10%;background-size: 100% auto;}
@keyframes play{
    0% {
        transform:rotate(0deg);  }
    100% {
        transform:rotate(360deg);  }
}
.wei-blog{margin:30px auto;}
.wei-blog img{display: block;margin: 0 auto;width: 3.2rem;}
.wei-blog h2{font-size: 0.9rem;text-align: center;}
.wei-blog  input{width: 70%;height: 40px;border:2px solid #595757;border-radius: 10px;text-align: center;margin: 1rem auto 0;display: block;font-size: 0.65rem;}
.submit-btn{width: 70%;height: 50px;font-size:0.95rem;background: #ffde32;border-radius: 12px;color: #000;text-align: center;line-height: 50px;display: block;}


/* 结果页 */
.results-des{margin: 0 auto;}
.results-des .show-head{width: 100%;height: 200px;margin-top: -0.7rem;}
.results-des .boy-head{background: url("../img/show-boy-head.svg") no-repeat center;}
.results-des .girl-head{background: url("../img/show-girl-head.svg") no-repeat center;background-size: 100%;}
.results-des .describe{margin: 0 auto;}
.results-des .des{display: none;}
.results-des .describe .expression {margin: 0 auto;height: 70px;position: relative;}
.results-des .describe .expression .out{width: 20%;max-width:100px;height: auto;display: block;position: absolute;left: 50%;margin-left: -10%;z-index: 9;}
.results-des .describe .expression .emo{width: 20%;max-width:100px;height: auto;display: block;position: absolute;left: 50%;margin-left: -10%;z-index: 99;}
.results-des .describe{margin: 30px auto;}
.results-des .describe h2{font-size: 0.7rem;text-align: center;margin-top: 0.2rem;}
.results-des .describe p{width: 80%;margin: 0.2rem auto 0;color: #666;font-size: 0.65rem;}
.results-des .report{position:fixed;left: 0 ;bottom:0;width: 100%;background: #fff;z-index: 999;}
.results-des .report span{width: 33.33%;float: left;text-align: center;font-weight: bold;font-size: 0.8rem;}
.results-des .report span img{display: block;margin: 0 auto 10px;max-width: 200px;}
.detail-btn img {margin: 0 auto;}
.results-des .report span  i{font-style:inherit;}
.results-des .report .share-result, .results-des .report .play-again{padding-top: 3rem;}
.results-des .report span.detail-btn{position: relative;}
.report a {color: #000;font-size: 0.8rem;}
.results-des .report span.detail-btn a{position: absolute;left: 50%;top: 50%;color: #000;margin-left:-16px;margin-top: -30px;}

/* 详情页 */
.cold-fusion{margin: 0 auto;overflow: auto;}
.cold-fusion .head{width: 100%;height: 200px;background: #ffde32;}
.cold-fusion .head-new{background: #fff;position: fixed;left: 0;top: 0;z-index: 999;height: 50px !important;}
.cold-fusion .head .radar-map{width:375px;height: 250px;margin: 0 auto;position: fixed;top:40px;right: 0;z-index: 99;overflow: auto;}
.cold-fusion .head .radar-map div{overflow: auto !important;top: 0 !important;}
.cold-fusion .chara_list{margin:90px auto ;box-sizing:initial;padding-left:1rem;padding-right:1rem;padding-bottom: 100px;}
.cold-fusion .chara_list_new{height: 80%;overflow: auto;}
.cold-fusion .chara_list li{margin: 20px auto 40px;}
.cold-fusion .chara_list li .tit{margin: 0 auto;width: auto;overflow:hidden;}
.cold-fusion .chara_list li .tit .tit-explain{width: 70%;float: left;margin-top: 10px;}
.cold-fusion .chara_list li .tit .tit-explain h2{font-size: 0.7rem;margin: 0 auto;}
.cold-fusion .chara_list li .tit .tit-explain  .schedule{width: 100%;height: 10px;background: #f3f3f3;border-radius: 20px;display: inline-block;position: relative;}
.cold-fusion .chara_list li .tit .tit-explain  .schedule em{position: absolute;width: 80%;background: #a8e318;left: 0;top: 0;height: 10px;border-radius: 20px;}
.cold-fusion .chara_list li .tit .tit-explain .schedule{}
.cold-fusion .chara_list li .tit .grade{width:68px;float: right; height: 68px;background: url("../img/medium-ico.svg") no-repeat top center;}
.cold-fusion .chara_list li .tit .height{background: url("../img/high-mark.svg") no-repeat center center;}
.cold-fusion .chara_list li .tit .low{background: url("../img/low-grade.svg") no-repeat center center;}
.cold-fusion .chara_list li .tit .grade span{font-size:0.8rem;font-weight: bold;font-family: pictograph;text-align: center;line-height: 68px;display: block;}
.cold-fusion .chara_list li .tit .height span{padding-top:14px;}
.cold-fusion .chara_list li .tit .low span{padding-top:14px;}
.cold-fusion .chara_list li p{margin: 20px auto;color: #666;clear: both;font-size: 0.65rem;}
.pull-down{position: fixed;left: 50%;bottom: 10px;animation: start 1.5s infinite ease-in-out;}


.cold-fusion .report{position:fixed;left: 0 ;bottom:-50%;width: 100%;background: #fff;}
.cold-fusion .report span{width: 33.33%;float: left;text-align: center;font-weight: bold;}
.cold-fusion .report span img{display: block;margin: 0 auto;}
.cold-fusion .report span  i{font-style:inherit;}
.cold-fusion .report .share-result,.cold-fusion .report .play-again{padding-top: 44px;}
.cold-fusion .report span.detail-btn{position: relative;}

.cold-fusion .report span.detail-btn a{position: absolute;left: 38%;top: 38%;color: #000;}

.page-sty{
  overflow: hidden;
    -webkit-overflow-scrolling : touch;

}
@-webkit-keyframes start {
    0%,30% {
        opacity: 0;
        -webkit-transform: translate(0,-10px)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate(0,0)
    }

    100% {
        opacity: 0;
        -webkit-transform: translate(0,8px)
    }
}

@media screen and (max-width: 320px) {
    .head-bg{height: 180px;}
    .head-bg .img{height: 180px;}
    .head-bg .img-head{width: 45%;margin-left: -25%;}
    .wei-blog{margin: 20px auto;}
    .submit-btn{bottom: 6%;}
    .cold-fusion .head .radar-map{width: 320px;}
    .results-des .describe .expression{height: 50px;}
}

@media screen and (min-width: 414px) {
    .cold-fusion .head .radar-map{width: 414px;height: 300px;}
    .cold-fusion .chara_list{margin:160px auto;}
}
